<template>
	<!-- 修改信息 -->
	<div id="amending" class="amending">
		<div class="amendingCont">
			<div class="amendingCont_cluster">
				<div class="amendingCont_cluster_Left">
					<div class="floorTitle">
						<span>修改信息</span>
						<i class="iconfont icon-xiegang"></i>
						<span></span>
					</div>
					<div class="amendingCont_cluster_Left_contB">
						<div class="amendingCont_cluster_content contA">
							<van-cell-group :border='false'>
								<van-field :value="form.RealName" placeholder="请输入用户名" label="姓名:"
									@change="RealNameChange" required  :border='false' />
							</van-cell-group>
							<div class="labelSty">
								<div style="">性别:</div>
								<van-radio-group :value="form.Gender" @change="GenderChange" style="display: flex;">
									<van-radio name="1">男</van-radio>
									<van-radio name="2" style="margin-left: 20px">女</van-radio>
								</van-radio-group>
							</div>
							<div class="birth">
								<p>出生日期:</p>
								<p style="margin-left: 15px; flex: 1" @click="openPopup('popupShow')">
									<gpp-date-picker @onCancel="BirthdayCancel" @onConfirm="BirthdayChange">
										{{pickerDate}}
									</gpp-date-picker>
								</p>
							</div>

							<!-- <van-popup
                :show="popupShow"
                @close="onClose"
                custom-style="width: 100%;"
                position="bottom"
              >
                <van-datetime-picker
                  type="date"
                  :min-date="1000"
                  @input="getValues"
                  :value="form.Birthday"
                  @confirm="BirthdayChange"
                  @cancel="BirthdayCancel"
                />
              </van-popup> -->
							<div class="birth">
								<p>学历:</p>
								<p style="margin-left: 15px; flex: 1" @click="openPopup('BirthdayShow')">
									{{ EducationName }}
								</p>
							</div>
							<!-- 学历 -->
							<!-- <van-cell title="请选择学历" is-link @click="showPopup" @cancel="onClose" /> -->
							<van-popup :show="BirthdayShow" @close="onClose" custom-style="width: 100%;"
								position="bottom" z-index="1000" @cancel="onClose">
								<van-picker show-toolbar :columns="optionsedu" @confirm="EducationChange"
									values="ValueID" key="ValueID" value-key="ValueText" @cancel="onClose" />
							</van-popup>

							<!-- 职称 -->

							<div class="birth">
								<p>职称:</p>
								<p style="margin-left: 15px; flex: 1" @click="openPopup('JobTitleShow')">
									{{ JobTitle }}
								</p>
							</div>
							<!-- <van-cell title="请选择职称" is-link @click="showPopup" @cancel="onClose" /> -->
							<van-popup :show="JobTitleShow" @close="onClose" custom-style="width: 100%;"
								position="bottom" z-index="1000" @cancel="onClose">
								<van-picker show-toolbar :columns="optionsejob" @confirm="JobTitleChange"
									values="ValueID" key="ValueID" value-key="ValueText" @cancel="onClose" />
							</van-popup>
							<!-- <van-popup
                :show="JobTitleShow"
                @close="onClose"
                custom-style="width: 100%;"
                position="bottom"
                  z-index="1000"
              >
                <van-picker
                show-toolbar
                  :columns="optionsejob"
                  @change="JobTitleChange"
                  values="ValueID"
                  key="ValueID"
                  value-key="ValueText"
                />
              </van-popup> -->

							<van-cell-group :border='false'>
								<van-field :value="form.SectionOffice" placeholder="请输入科室" label="科室:"
									@change="SectionOfficeChange" :border='false' />
							</van-cell-group>

							<van-cell-group :border='false'>
								<van-field :value="form.WorkUnit" placeholder="请输入工作单位" label="工作单位:"
									@change="WorkUnitChange" :border='false' />
							</van-cell-group>
							<van-cell-group :border='false'>
								<van-field :value="form.Address" placeholder="请输入联系地址" label="联系地址:"
									@change="AddressChange" :border='false' />
							</van-cell-group>
							<!-- <el-form
                size="small"
                ref="orgDialogForm"
                :model="form"
                :rules="rules"
              >
                <el-row>
                  <el-col :span="12" style="margin-left: 21px">
                    <el-form-item label="姓名：" prop="RealName">
                      <el-input v-model="form.RealName"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" style="margin-left: 20px">
                    <el-form-item label="性别：" prop="Gender">
                      <el-radio v-model="form.Gender" :label="1">男</el-radio>
                      <el-radio v-model="form.Gender" :label="2">女</el-radio>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" style="margin-left: -8px">
                    <el-form-item label="出生日期：" prop="Birthday">
                      <el-date-picker
                        v-model="form.Birthday"
                        type="date"
                        placeholder="选择日期"
                        format="yyyy-MM-d"
                        :default-value="timeDefaultShow"
                        value-format="yyyy-MM-dd H:mm:ss"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" style="margin-left: 30px">
                    <el-form-item label="学历：">
                      <el-select
                        size
                        v-model="form.Education"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in optionsedu"
                          :key="item.ValueID"
                          :label="item.ValueText"
                          :value="item.ValueID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" style="margin-left: 30px">
                    <el-form-item label="职称：">
                      <el-select
                        size
                        v-model="form.JobTitle"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in optionsejob"
                          :key="item.ValueID"
                          :label="item.ValueText"
                          :value="item.ValueID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" style="margin-left: 30px">
                    <el-form-item label="科室：" prop="SectionOffice">
                      <el-input v-model="form.SectionOffice"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" style="margin-left: 2px">
                    <el-form-item label="工作单位：" prop="WorkUnit">
                      <el-input v-model="form.WorkUnit"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" style="margin-left: 2px">
                    <el-form-item label="联系地址：">
                      <el-input v-model="form.Address"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form> -->
							<div class="personalCont_Cont_right_save" @click="save()">
								保存
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// import router from "@/router/index";
	import moment from "../../../util/index";
	import gppDatePicker from "@/components/gpp-datePicker/gpp-datePicker.vue"
	export default {
		name: "amending",
		components: {
			gppDatePicker
		},
		data() {
			return {
				pickerDate: '请选择',
				form: {
					rules: "",
					// 姓名
					RealName: "",
					// 工作单位
					WorkUnit: "",
					// 出生日期
					Birthday: null,
					// 性别
					Gender: 1,
					// 联系地址
					Address: "",
					// 专业
					Professional: "",
					// 部门
					SectionOffice: "",
					// 学历
					Education: "",
					// 职称
					JobTitle: "",
					// 职务
					Job: "",
				},
				timeDefaultShow: new Date("1990-10-23"),
				optionsedu: [],
				optionsejob: [],
				rules: {
					RealName: [{
						required: true,
						message: "请输入姓名",
						trigger: "blur"
					}],
					Birthday: [{
						required: true,
						message: "请输入出生日期",
						trigger: "blur"
					}, ],
					Gender: [{
						required: true,
						message: "请勾选性别",
						trigger: "blur"
					}],
					Education: [{
						required: true,
						message: "请选择学历",
						trigger: "change"
					}, ],
					JobTitle: [{
						required: true,
						message: "请选择职称",
						trigger: "change"
					}, ],
				},
				BirthdayB: "",
				popupShow: false,
				BirthdayShow: false,
				JobTitleShow: false,
				EducationName: "请选择",
				JobTitle: "请选择",
				tim: null,
			};
		},
		methods: {
			getValues(e) {},
			AddressChange(e) {
				this.form.Address = e.detail;
			},
			WorkUnitChange(e) {
				this.form.WorkUnit = e.detail;
			},
			SectionOfficeChange(e) {
				this.form.SectionOffice = e.detail;
			},
			JobTitleChange(e) {
				console.log(e,'lll')
				this.JobTitleShow = false;
				this.form.JobTitle = e.detail.value.ValueID;
				this.JobTitle = e.detail.value.ValueText;
			},
			EducationChange(e) {
				console.log(e, "娃哈哈");
				this.BirthdayShow = false;
				this.form.Education = e.detail.value.ValueID;
				this.EducationName = e.detail.value.ValueText;
			},
			BirthdayCancel(e) {
				this.popupShow = false;
			},
			BirthdayChange(e) {
				let date = new Date(e.dateValue);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let tim = date.getDate();
				this.form.Birthday = year + "年" + month + "月" + tim + "日";
				this.Birthday = `${year}/${month}/${tim} 0:00:00`;
				this.tim = e.dateValue;
				this.pickerDate = this.form.Birthday
			},
			RealNameChange(e) {
				this.form.RealName = e.detail;
			},
			GenderChange(e) {
				this.form.Gender = e.detail;
			},
			showPopup() {},
			openPopup(name) {
				this[name] = true;
			},
			onClose() {
				this.BirthdayShow = false;
				this.JobTitleShow = false;
			},
			// 修改保存信息
			save() {
				//   this.$refs.orgDialogForm.validate((valid) => {
				// if (valid) {
				if (!this.form.RealName.trim()) {
					return wx.showToast({
						title: "姓名不为空",
						icon: "none"
					});
				}
				console.log(this.form.Gender, "发放 ");
				if (!this.form.Gender) {
					return wx.showToast({
						title: "请选择性别",
						icon: "none"
					});
				}
				if (!this.form.Birthday) {
					return wx.showToast({
						title: "请选择出生日期",
						icon: "none"
					});
				}
				if (this.form.Education == "") {
					this.form.Education = 0;
				} else {
					this.form.Education = this.form.Education;
				}
				if (this.form.JobTitle == "") {
					this.form.JobTitle = 0;
				} else {
					this.form.JobTitle = this.form.JobTitle;
				}
				this.BirthdayB = moment.formatTime(this.tim);
				console.log(this.BirthdayB, "wjj");
				this.$httphelper
					.post("/api/LmUserApi/UpdateUserMessage", {
						OpenId: this.$localStorage.getItem("AuthorId"),
						WorkUnit: this.form.WorkUnit,
						// Birthday: this.form.Birthday,
						Birthday: this.Birthday,
						Gender: Number(this.form.Gender),
						Address: this.form.Address,
						RealName: this.form.RealName,
						// Professional: this.form.Professional,
						Professional: "",
						Education: this.form.Education,
						JobTitle: this.form.JobTitle,
						SectionOffice: this.form.SectionOffice,
						// Job: this.form.Job,
						Job: "",
						Mentor: "",
						ZipCode: "",
						Mobile: this.$localStorage.getItem("Mobile"),
					})
					.then((res) => {
						if (res.data.data == true) {
							this.$message({
								message: "修改信息成功",
								type: "success",
							});
						} else {
							this.$message({
								message: "修改信息失败",
								type: "warning",
							});
						}
					})
					.catch((err) => {
						console.log("请求失败：" + "err");
					});
				// }
				//   });
			},
			// 获取用户信息
			getuderinfo() {
				this.$httphelper
					.post("/api/LmUserApi/GetAuthorInfo", {
						OpenId: this.$localStorage.getItem("AuthorId"),
					})
					.then((res) => {
						console.log(res.data.data.Birthday, "浏览量");
						let time = new Date(res.data.data.Birthday);
						let year = time.getFullYear();
						let month = time.getMonth() + 1;
						let date = time.getDate();
						this.form.RealName = res.data.data.RealName;
						this.form.WorkUnit = res.data.data.WorkUnit;
						this.form.Birthday = time.getTime();
						this.Birthday = `${year}/${month}/${date} 0:00:00`;
						this.form.Gender = res.data.data.Gender + "" || "1";
						this.form.Address = res.data.data.Address;
						this.form.Professional = res.data.data.Professional;
						this.form.SectionOffice = res.data.data.SectionOffice;
						this.form.Education = res.data.data.Education;
						this.form.JobTitle = res.data.data.JobTitle;
						this.form.Job = res.data.data.Job;
						this.getEducation();
						this.getJobTitle();
						if (res.data.data.Education == 0) {
							this.form.Education = "";
						} else {
							this.form.Education = res.data.data.Education;
						}
						if (res.data.data.JobTitle == 0) {
							this.form.JobTitle = "";
						} else {
							this.form.JobTitle = res.data.data.JobTitle;
						}
						if (res.data.data.Birthday == null) {
							this.form.Birthday = this.form.Birthday;
						} else {
							this.form.Birthday = res.data.data.Birthday;
						}
					})
					.catch((err) => {
						console.log("请求失败：" + "err");
					});
			},
			// 获取学历下拉
			getEducation() {
				console.log("坎坎坷坷");
				this.$httphelper
					.post("/api/LmUserApi/GetDictValue", {
						TypeName: "Education",
					})
					.then((res) => {
						console.log(res, "娃哈哈");
						this.optionsedu = res.data.data;
						let val = res.data.data.filter((item) => {
							return item.ValueID === this.form.Education;
						})[0];
						console.log(val, "lll");
						if (val) {
							this.EducationName = val.ValueText;
						}
					})
					.catch((err) => {
						console.log("请求失败：" + "err");
					});
			},
			// 获取职称下拉
			getJobTitle() {
				this.$httphelper
					.post("/api/LmUserApi/GetDictValue", {
						TypeName: "JobTitle",
					})
					.then((res) => {
						this.optionsejob = res.data.data;
						let val = res.data.data.filter((item) => {
							return item.ValueID === this.form.JobTitle;
						})[0];
						console.log(res.data.data, "pp");
						if (val) {
							this.JobTitle = val.ValueText;
						}
					})
					.catch((err) => {
						console.log("请求失败：" + "err");
					});
			},
		},
		// 获取当前日期转换为年月日格式
		filters: {
			// formatDates: function (value) {
			//   let date = new Date(value);
			//   let y = date.getFullYear();
			//   let MM = date.getMonth() + 1;
			//   MM = MM < 10 ? ('0' + MM) : MM;
			//   let d = date.getDate();
			//   d = d < 10 ? ('0' + d) : d;
			//   let h = date.getHours();
			//   h = h < 10 ? ('0' + h) : h;
			//   let m = date.getMinutes();
			//   m = m < 10 ? ('0' + m) : m;
			//   let s = date.getSeconds();
			//   s = s < 10 ? ('0' + s) : s;
			//   return y + '/' + MM + '/' + d + ' ' + h + ':' + m + ':' + s;
			// }
			// formatDate(time) {
			//   console.log(time)
			//   var date = new Date(time);
			//   return formatDate(date, 'yyyy-MM-dd');
			// }
			formatDate(value) {
				return moment(value).format("YYYY-MM-DD HH:mm:ss");
			},
		},
		created() {
			console.log("急急急");
			this.getuderinfo();
			this.getEducation();
			this.getJobTitle();
		},
	};
</script>

<style lang="less" scoped>
	.labelSty {
		display: flex;
		align-items: center;
		color: #3c3c3c;
		font-size: 13px;
		margin-top: 10px;
		margin-bottom: 10px;

		>div:first-of-type {
			padding: 10px 15px;
			width: 90px;
			box-sizing: border-box;
		}
	}

	.birth {
		display: flex;
		align-items: center;
		color: #3c3c3c;
		font-size: 13px;

		p:first-of-type {
			width: 90px;
			padding: 10px 15px;
			box-sizing: border-box;
		}

		p:last-of-type {
			flex: 1;
		}
	}

	@media screen and (min-width: 1010px) {
		#amending {
			display: none;
		}
	}

	@media screen and (max-width: 1010px) {
		#amending {
			width: 100%;

			.amendingCont {
				width: 100%;
				height: 100%;
			}

			.amendingCont_cluster {
				width: 94%;
				margin: 0 auto;
				margin-top: 10px;

				.amendingCont_cluster_Left {
					width: 100%;

					.floorTitle {
						height: 100%;
						border-bottom: 2px solid #eee;
						position: relative;

						span:nth-child(1) {
							display: inline-block;
							font-size: 20px;
							color: #000;
							width: 85px;
							height: 35px;
							border-bottom: 2px solid #003c80;
							font-family: "Adobe Heiti Std R";
							font-weight: normal;
							line-height: 30px;
						}

						span:nth-child(3) {
							color: #797979;
							font-size: 14px;
							font-family: "Adobe Heiti Std R";
						}
					}

					.amendingCont_cluster_Left_contB {
						width: 100%;
						margin-top: 15px;

						/deep/.el-col-12 {
							width: 100% !important;
						}

						/deep/.el-input {
							width: 72% !important;
						}

						.amendingCont_cluster_content {
							width: 100%;
							height: 100%;
							margin-bottom: 102px;
						}

						.personalCont_Cont_right_save {
							width: 94px;
							height: 30px;
							background: #003c80;
							color: #ffffff;
							font-size: 16px;
							line-height: 30px;
							text-align: center;
							margin: 30px auto;
						}
					}
				}
			}
		}
	}

	/deep/ .van-field__input {
		font-size: 24rpx;
	}

	/deep/ .van-cell__value {
		padding: 0 30rpx;
		height: 64rpx;
		line-height: 64rpx;
		display: flex;
		border: 1px solid #dcdfe6;
		border-radius: 8rpx;
	}

	

</style>
